<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
    <style>
        .box {
            background: red;
            width:100px;
            height: 100px;
        }
        .a {
            background: yellow;
        }
        .b {
            background: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        {{name}} 
        <div>{{age}}</div>

        <div class="box">无法改变背景色</div> <!-- 以前是直接写死的一个class -->

        <!-- 现在要将背景色写成一个变量，动态加到div上 。 用冒号来绑定变量，这个属性就成了动态属性。-->
        <div :class="whichcolor">可以切换背景色</div>
        <!-- 在标签中使用{{}}。会被当成js地盘，那如何在属性上将内容变成js地盘可以拿来解析呢? -->
        <button @click="handleChange">点击修改状态</button><!-- 学习怎么实现事件绑定。 不操作DOM的情况下改变页面数据-->


        <!-- {{}}: 叫做 模板语法/插值语法。不止是解析变量、解析状态这么简单。放一些三元运算符、函数表达式都是可以解析的 -->
        <!-- 但是：注意 不支持 if else 这种表达式。想写if else的话，用v-if -->

        <div>{{10 > 20 ? 'aaa' : 'bbb'}}</div>
        <div>{{56 + 60}}</div>
        <div>56 + 60</div> <!-- 不写{{}} ：就是字符串 -->



        <div :class="isColor ? 'a':'b'">class中写表达式(添加a还是b)</div> <!-- 判断 class 应该是 a 还是 b, 两者之间选一个 -->
        <div :class="{a:10>2}">class中写表达式(要不要添加a)</div> <!-- 判断是否要添加 a , 只有一个。注意：必须加{}。也可以写成 上面这种。第二者用null代替-->
        <div :class="10>2 ? 'a' : null">class中写表达式(要不要添加a)</div>


        <!-- 冒号不止是用来绑定class属性。所有属性都可以使用冒号来动态绑定。 ！！！！所有属性。 例如：img的src属性 -->
        <img :src="url">



       <!--   vue中提供了语法糖。用来实现 DOM 新增、删除、隐藏等等功能。例如：v-if v-show ：在vue中称为指令--> 
       <div v-show="isShow">我是动态显示和隐藏的</div> <!-- 指令能直接解析变量 是不用添加冒号的 -->
       <div v-show="isCreated">我是动态创建和删除的</div> <!-- 指令能直接解析变量 是不用添加冒号的 -->
       <!-- 区别就是： v-if比v-show更懒惰。v-show:是一开始就会先创建DOM节点。然后通过display:none来控制是否在页面中显示。而v-if是不到变成true的最后一刻是不会创建DOM节点的 -->


       <!-- v-for :列表渲染指令。 也可以用来快速遍历一个数组,用in关键字遍历数组 -->
       <ul v-for="(item,index) in list">
           <li>{{item}} -- -{{index}}</li>
       </ul>



       <!-- v-bind:属性='变量'   动态绑定属性  简写成 :属性='变量'-->
       <!-- v-on:click='函数名'  动态绑定事件  简写成 @click='函数名'-->
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                name:'张三',
                age:10,
                whichcolor:'a',
                isColor:false,
                url:'',
                isShow:false,
                isCreated:false,
                list:[10,20,30,40]
            },
            methods: {
                handleChange(){
                    // 改变状态： 下面两种写法是一样的
                    this.age += 2
                    vm.name = '李四'

                    this.whichcolor = 'b'
                    this.isColor = !this.isColor,
                    this.url = 'https://github.com/yyx990803.png'
                    this.isShow = !this.isShow
                    this.isCreated = !this.isCreated
                }
            },
        })
    </script>
</body>
</html>